<template>
    <div style="background-color: #e9ecf4;">
        <div class="top">
            <span id="mine">我的</span>
            <div class="image">
                <img id="head" src="../assets/img/head.jpg" alt="用户头像" />
                <div>
                    <span id="name">好青崧</span>
                    <span>推荐人：无</span>
                </div>
            </div>
            <div class="travel">
                <p>旅游达人</p>
                <span>畅行一路通，出游最轻松</span>
            </div>
        </div>
        <div class="fif">
            <div class="fif_block">
                <img class="ones" src="../assets/img/30012.png" alt="浏览记录图标" />
                <span>浏览记录</span>
            </div>
            <div class="fif_block">
                <img class="twos" src="../assets/img/30013.png" alt="我的奖品图标" />
                <span>我的奖品</span>
            </div>
            <div class="fif_block">
                <img class="threes" src="../assets/img/30014.png" alt="我的订单图标" />
                <span>我的订单</span>
            </div>
            <div class="fif_block">
                <img class="fours" src="../assets/img/30015.png" alt="推广信息图标" />
                <span>推广信息</span>
            </div>
            <div class="fif_block">
                <img src="../assets/img/my1.png" alt="推广码图标" @click="jump('promotion')" />
                <span>推广码</span>
            </div>
        </div>
        <div class="else">
            <div class="else_item">
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                    <span>我的团队</span>
                    <span>0</span>
                </div>
                <img class="sex" src="../assets/img/30010.png" alt="团队图标" />
            </div>
            <div class="else_money">
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                    <span>收益</span>
                    <span>0</span>
                </div>
                <img src="../assets/img/30011.png" alt="收益图标" />
            </div>
        </div>
        <div class="eight">
            <span>其他服务</span>
            <div class="eight_one">
                <div class="eight_block">
                    <img src="../assets/img/30008.png" alt="收藏记录图标" />
                    <span>收藏记录</span>
                </div>
                <div class="eight_block" id="good">
                    <img src="../assets/img/30007.png" alt="点赞记录图标" />
                    <span>点赞记录</span>
                </div>
                <div class="eight_block">
                    <img src="../assets/img/30009.png" alt="在线客服图标" />
                    <span>在线客服</span>
                </div>
                <div class="eight_block">
                    <img src="../assets/img/30006.png" alt="实名认证图标" />
                    <span>实名认证</span>
                </div>
            </div>
            <div class="eight_ones">
                <div class="eight_block">
                    <img src="../assets/img/30004.png" alt="已取消图标" />
                    <span>已取消</span>
                </div>
                <div class="eight_block">
                    <img src="../assets/img/30003.png" alt="待付款图标" />
                    <span>待付款</span>
                </div>
                <div class="eight_block">
                    <img src="../assets/img/30005.png" alt="已退款图标" />
                    <span>已退款</span>
                </div>
                <div class="eight_block">
                    <img src="../assets/img/30002.png" alt="待评价图标" />
                    <span>待评价</span>
                </div>
            </div>
        </div>
        <!-- 攻略 -->
        <div class="look">
            <span>我的攻略</span>
            <div style="display: flex;align-items: center;" @click="jump('/strategy')" >
                <span>查看全部</span>
                <img src="../assets/img/右箭头.png" alt="右箭头图标" />
            </div>
        </div>
        <div class="item max_strategy">
            <div class="state_mine" v-for="(item, index) in information" :key="index">
                <img :src="'https://jingqu.kuxia.top' + item.img" alt="攻略图片" />
                <p>{{ item.title }}</p>
                <div class="strategy_content">
                    <div class="strategy_one">
                        <img @error="e => { e.target.src = defaultImage }"
                            :src="'https://jingqu.kuxia.top' + item.avatar" alt="作者头像" />
                        <span>{{ item.name }}</span>
                    </div>
                    <div class="strategy_img">
                        <img src="../assets/img/love.png" alt="点赞图标" />
                        <span>{{ item.like_num == null ? "1" : item.like_num }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部导航栏 -->
        <van-tabbar active-color="#ee0a24" v-model="actives">
            <van-tabbar-item icon="home-o" @click="jump('/home')">首页</van-tabbar-item>
            <van-tabbar-item icon="search" @click="jump('/strategy')">攻略</van-tabbar-item>
            <slot>
                <div class="home_issue">
                    <div class="home_issue_img" @click="jump('/issue')">
                        <img src="../assets/img/100016.png" alt="发布图标" />
                    </div>
                    <div style="height: 62%;">

                    </div>
                    <p style="font-size: 12px;color: var(--van-tabbar-item-text-color);
                        font-size: var(--van-tabbar-item-font-size);
                        line-height: var(--van-tabbar-item-line-height);
                        cursor: pointer;">发布</p>
                </div>
            </slot>
            <van-tabbar-item icon="friends-o">排行榜</van-tabbar-item>
            <van-tabbar-item icon="setting-o" @click="jump('/mine')">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { trave, introData, ask } from '../api/start';

const router = useRouter();
const information = ref([]);
const actives = ref(3);
const defaultImage = ref('https://picsum.photos/200/300');

const jump = (url) => {
    router.push(url);
};

// 攻略
introData({
    scenic_id: 5,
}).then((res) => {
    console.log(res.data); // 成功回调
    information.value = res.data;
});
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

body {
    padding-bottom: 100px;
}

/* 底部导航栏 */
.bottom {
    width: 100%;
    height: 55px;
    position: fixed;
    display: flex;
    z-index: 1000;
    justify-content: space-around;
    bottom: 0;
    background-color: #ffffff;
}

.first {
    text-align: center;
    width: 20%;
    height: 55px;
}

.first img {
    width: 25px;
    height: 25px;
    margin: 5px 20px 0 20px;
}

.first p {
    font-size: 13px;
}

.second {
    text-align: center;
    width: 20%;
    height: 55px;
}

.second img {
    width: 25px;
    height: 25px;
    margin: 5px 20px 0 20px;
}

.second p {
    font-size: 13px;
    color: #ff535c;
}

/* 飞机 */
.aircraft {
    width: 65px;
    height: 65px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -6vh;
    box-shadow: 2px 2px 5px 2px #e2e2e2;
    border-radius: 100%;
    background-color: #ffffff;
}

.active-class {
    width: 70%;
    height: 70%;
    margin-top: -1500px;
    transition: 1.5s all;
}

.aircraft img {
    width: 70%;
    height: 70%;
}

.plane {
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    width: 20%;
    height: 55px;
}

.plane p {
    font-size: 13px;
}

.top {
    width: 100%;
    padding: 10px 0 140px 0;
    min-height: 180px;
    max-height: 222px;
    background-image: url('../assets/img/30001.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    margin-top: -30px;
}

#mine {
    display: block;
    font-size: 14px;
    margin-top: 30px;
    color: #505050;
    text-align: center;
}

.image {
    width: 100%;
    display: flex;
    align-items: center;
    height: 80px;
}

.image img {
    width: 55px;
    height: 55px;
    border-radius: 100%;
    margin-left: 20px;
}

.image span {
    margin-left: 13px;
    color: #505050;
    font-size: 14px;
}

.image div span {
    font-size: 13px;
    margin-left: 13px;
    color: #505050;
}

.image div {
    display: flex;
    flex-direction: column;
    justify-content: left;
}

.travel {
    width: 100%;
    height: 120px;
    position: absolute;
    bottom: 0;
}

.travel p {
    font-size: 17px;
    margin-left: 25px;
}

.travel span {
    margin-left: 25px;
    font-size: 13px;
    color: #2d2d2d;
}

.fif {
    width: 100%;
    height: 70px;
    display: flex;
    background-color: #ffffff;
}

.fif_block {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.fif_block img {
    width: 40px;
    height: 40px;
}

.fif_block span {
    font-size: 13px;
    color: #363636;
}

.else {
    width: 100%;
    height: 70px;
    color: #505050;
    display: flex;
    margin-top: 5px;
    justify-content: space-around;
    align-items: center;
}

.else_item {
    width: 48%;
    height: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    border-radius: 5px;
}

.else_item img {
    width: 45px;
    height: 45px;
}

.else_money {
    width: 48%;
    height: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    border-radius: 5px;
}

.else_money img {
    width: 45px;
    height: 45px;
}

.eight {
    width: 98%;
    margin-left: 1%;
    border-radius: 5px;
    height: 160px;
    margin-top: 5px;
    color: #505050;
    padding-top: 5px;
    background-color: #ffffff;
}

.eight span {
    font-size: 14px;
    color: #505050;
    margin-left: 10px;
}

.eight_one {
    width: 100%;
    height: 70px;
    justify-content: space-around;
    display: flex;
}

/* 攻略 */

.eight_ones {
    width: 100%;
    height: 70px;
    justify-content: space-around;
    display: flex;
}

.eight_block {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.eight_block img {
    width: 25px;
    height: 25px;
}

.eight_block span {
    font-size: 13px;
    color: #363636;
}

/* 攻略 */
.max_strategy {
    width: 100%;
    height: auto;
    column-count: 2;
    column-gap: 0px;
    padding-top: 10px;
    padding-bottom: 60px;
}

.state_mine {
    break-inside: avoid;
    height: auto;
    width: calc(100% - 15px);
    border-radius: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    margin-left: 5px;
    background-color: #ffffff;
}

.state_mine img {
    width: 100%;
    border-radius: 5px 5px 0 0;
}

.state_mine p {
    display: block;
    width: 155px;
    font-size: 14px;
    margin-left: 5px;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line {
    width: 1px;
    height: 2vh;
    margin-left: 3px;
    background-color: #e7e7e7;
}

.strategy_img {
    width: 50%;
    height: 4vh;
    font-size: 13px;
    display: flex;
    justify-content: right;
    align-items: center;
}

.strategy_img img {
    width: 2.5vh;
    height: 2.5vh;
    margin-left: 10px;
    margin-right: 5px;
}

.strategy_img span {
    font-size: 14px;
    margin-right: 10px;
    color: #4f4f4f;
}

.strategy_content {
    width: 100%;
    height: 5vh;
    display: flex;
}

.strategy_one {
    width: 50%;
    display: flex;
    white-space: nowrap;
    align-items: center;
}

.strategy_one img {
    width: 4vh;
    height: 4vh;
    margin-left: 5px;
    border-radius: 100%;
}

.strategy_one span {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    margin-left: 5px;
    color: #7d7d7d;
}

.look {
    width: 98%;
    margin-left: 1%;
    border-radius: 5px;
    height: 30px;
    color: #505050;
    margin-top: 10px;
    display: flex;
    background-color: #ffffff;
    align-items: center;
    justify-content: space-between;
}

.look img {
    width: 12px;
    height: 12px;
    margin-right: 10px;
}

.look span {
    font-size: 14px;
    margin-left: 10px;
}

.look span:last-child {
    font-size: 14px;
}

/* 底部导航栏样式 */
van-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.home_issue {
    width: 20%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.home_issue_img {
    position: absolute;
    width: 55px;
    height: 55px;
    top: -29px;
    background: #ffffff;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home_issue_img img {
    width: 40px;
    height: 40px;
}
</style>    